import React, {Component} from 'react';

import {StyleSheet, View, Text, ScrollView, FlatList, Image, TouchableOpacity} from 'react-native';
import ScreenUtils from "../utils/ScreenUtils";
import BaseComponent from "../common/BaseComponent";
import {Appearance} from "react-native-appearance";
import Color from "../utils/Color";
import CardView from 'react-native-cardview-wayne';
import Ripple from "react-native-material-ripple";
import {i18n} from '../language/i18n'

const backgroundColor = Appearance.getColorScheme() === 'dark' ? Color.darkBg : Color.lightBg
const TextColor = Appearance.getColorScheme() === 'dark' ? '#fff' : '#333333'
export default class Home extends BaseComponent{
    constructor(props) {
        super(props);
    }

    _renderHearder() {
       const imgBg = ScreenUtils.isDarkTheme() ? require('../../source/image/backgroundblack.png') : require('../../source/image/background.png')
        return (
            <View style={styles.headStyle}>
                <Image source={imgBg} style={styles.imgBgStyle}/>
                <View style={styles.headView}>
                    <View style={{flex:8,flexDirection: 'row', alignItems: 'center',}}>
                        <Image source={require('../../source/image/headImg.png')} resizeMode={'cover'} style={styles.head}/>
                        <Text numberOfLines={1} style={styles.headText}>Nicole</Text>
                    </View>
                    <View style={{flex: 1}}>
                        <TouchableOpacity activeOpacity={0.6} style={styles.addView}>
                            <Image style={styles.addIcon} resizeMode={'contain'} source={require('../../source/image/addIcon.png')}/>
                        </TouchableOpacity>
                    </View>
                </View>
                {this._renderStepView()}
            </View>
        )
    }

    _renderStepView() {
        let cardBgStyle = ScreenUtils.isDarkTheme() ? 'rgba(0, 0, 0, 0.4)' : 'rgba(255, 255, 255, 0.8)'
        return (
            <CardView
                onPress={() => this._jumpStepspage()}
                style={styles.cardView}
                cardElevation={4}
                maxCardElevation={4}
                radius={10}
                backgroundColor={cardBgStyle}>
                <TouchableOpacity activeOpacity={1} style={{padding:10, margin: 12}} onPress={() => this._jumpStepspage()}>
                    <Image source={require('../../source/image/arrowRight.png')} style={[{width: 9, height: 9}, styles.stepRightStyle]} />
                    {/*<View>*/}
                    {/*    <Text>ReactNative CardView for iOS and Android</Text>*/}
                    {/*</View>*/}
                    {/*<View>*/}
                    {/*    <Text>This is test</Text>*/}
                    {/*</View>*/}
                </TouchableOpacity>
            </CardView>
        )
    }

    _renderList() {
        let datas = [{
            id: '1',
        }, {
            id: '2',
        }, {
            id: '3',
        }, {
            id: '4',
        }, {
            id: '5'
        }, {
            id: '6'
        }, {
            id: '7'
        }]
        let array = []
        let itemH =ScreenUtils.screenHeight / 12
        let itemBg = ScreenUtils.isDarkTheme() ? Color.darkBg : '#fff'
        datas.forEach(item => {
            if (item.id === '1') {  // 心跳
                array.push(
                    this._renderCardItem(require('../../source/image/itemIconLeft.png'), i18n.t('heartRate'), '06.20', '98', 'Bpm', item.id, '#F84D4E')
                )
            }
            if (item.id === '2') {  // 睡眠
                array.push(
                    <CardView
                        key={item.id}
                        style={styles.cardItem}
                        cardElevation={4}
                        maxCardElevation={4}
                        radius={10}
                        backgroundColor={itemBg}>
                        <Ripple style={[styles.cardItem, {height: itemH * 0.8}]}>
                            <View style={styles.itemLeft}>
                                <Image source={require('../../source/image/itemIconLeft.png')} style={{width: 40, height: 40}} />
                                <View style={{flex: 1, justifyContent: 'space-between', marginHorizontal: 10}}>
                                    <Text style={{color: '#2884F6'}}>{i18n.t('heartRate')}</Text>
                                    <Text style={{color: '#999999'}}>06.20</Text>
                                </View>
                            </View>
                            <View style={styles.itemRight}>
                                <Text style={{color: TextColor, fontWeight: 'bold', fontSize: ScreenUtils.setFont(21)}}>7</Text>
                                <Text style={{color: '#999999', fontSize: ScreenUtils.setFont(18), paddingHorizontal: 5}}>H</Text>
                                <Text style={{color: TextColor, fontWeight: 'bold', fontSize: ScreenUtils.setFont(21)}}>59</Text>
                                <Text style={{color: '#999999', fontSize: ScreenUtils.setFont(18), paddingHorizontal: 5}}>M</Text>
                                <Image source={require('../../source/image/arrowRight.png')} style={{width: 10, height: 10}} />
                            </View>
                        </Ripple>
                    </CardView>
                )
            }

            if (item.id === '3') { // 卡路里消耗
                array.push(
                    this._renderCardItem(require('../../source/image/itemIconLeft.png'), i18n.t('engrgy'), '06.20', '364', 'Kcal', item.id, '#FB7425')
                )
            }

            if (item.id === '4') { // 睡眠
                array.push(
                    this._renderCardItem(require('../../source/image/itemIconLeft.png'), i18n.t('pressure'), '06.20', '35', 'Normal', item.id, '#01B2B1')
                )
            }

            if (item.id === '5') { // 血压
                array.push(
                    this._renderCardItem(require('../../source/image/itemIconLeft.png'), i18n.t('bloodOxygen'), '06.20', '98', 'Spo2', item.id, '#F44A45')
                )
            }

            if (item.id === '6') { // 运动时间
                array.push(
                    this._renderCardItem(require('../../source/image/itemIconLeft.png'), i18n.t('sportData'), '06.20', 'Run', 'Last', item.id, '#0AB9A8')
                )
            }

            if (item.id === '7') { // ✌️周期
                array.push(
                    <CardView
                        key={item.id}
                        style={styles.cardItem}
                        cardElevation={4}
                        maxCardElevation={4}
                        radius={10}
                        backgroundColor={itemBg}>
                        <Ripple style={[styles.cardItem, {height: itemH * 0.8}]}>
                            <View style={[styles.itemLeft, {flex: 3}]}>
                                <Image source={require('../../source/image/itemIconLeft.png')} style={{width: 40, height: 40}} />
                                <View style={{flex: 1, justifyContent: 'space-between', marginHorizontal: 10}}>
                                    <Text style={[styles.titleStyle, {color: '#FE76BF'}]}>{i18n.t('physiologicalCycle')}</Text>
                                    <Text style={{color: '#999999'}}>06.20</Text>
                                </View>
                            </View>
                            <View style={styles.itemRight}>
                                <Image source={require('../../source/image/arrowRight.png')} style={{width: 10, height: 10}} />
                            </View>
                        </Ripple>
                    </CardView>
                )
            }

        })
        return (
            <View style={{width: ScreenUtils.screenWidth, backgroundColor: backgroundColor, alignItems: 'center',marginTop: 20}}>
                {array}
            </View>
        )
    }

    _renderCardItem(iconUrl, title, time, num, subTitle, id, color) {
        let itemH =ScreenUtils.screenHeight / 12
        let itemBg = ScreenUtils.isDarkTheme() ? Color.darkBg : '#fff'
        return (
            <CardView
                key={id}
                style={styles.cardItem}
                cardElevation={4}
                maxCardElevation={4}
                radius={10}
                backgroundColor={itemBg}>
                <Ripple style={[styles.cardItem, {height: itemH * 0.8}]}>
                    <View style={styles.itemLeft}>
                        <Image source={iconUrl} style={{width: 40, height: 40}} />
                        <View style={{flex: 1, justifyContent: 'space-between', marginHorizontal: 10}}>
                            <Text style={[{color: color}, styles.titleStyle]}>{title}</Text>
                            <Text style={{color: '#999999'}}>{time}</Text>
                        </View>
                    </View>
                    <View style={styles.itemRight}>
                        <Text style={{color: TextColor, fontWeight: 'bold', fontSize: ScreenUtils.setFont(21)}}>{num}</Text>
                        <Text style={{color: '#999999', fontSize: ScreenUtils.setFont(18), paddingHorizontal: 5}}>{subTitle}</Text>
                        <Image source={require('../../source/image/arrowRight.png')} style={{width: 10, height: 10}} />
                    </View>
                </Ripple>
            </CardView>
        )
    }

    _renderComponents() {
        return (
            <ScrollView style={[styles.container, {backgroundColor: backgroundColor}]}>
                {this._renderHearder()}
                {this._renderList()}
                <View style={styles.compile}>
                    <TouchableOpacity style={styles.compileText} activeOpacity={0.6}>
                        <Text style={styles.cTextStyle}>{i18n.t('compile')}</Text>
                        <Image source={require('../../source/image/arrowRight.png')} style={{width: 10, height: 10}} />
                    </TouchableOpacity>
                </View>
            </ScrollView>
        )
    }


    // 跳转到步数页面
    _jumpStepspage() {
        // JumpUtil.push(this, Screens.Steps)
        // console.log('跳转什么问题')
        // Navigation.push(this.props.componentId, {
        //     component: {
        //         name: Screens.Steps,
        //     }
        // })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    headStyle: {
        width: ScreenUtils.screenWidth,
        minHeight: 420,
        // backgroundColor: 'skyblue'
    },
    imgBgStyle: {
        width: ScreenUtils.screenWidth,
        height: 248
    },
    headView: {
        width: ScreenUtils.screenWidth,
        height: 80,
        position: 'absolute',
        top: 40,
        left: 0,
        backgroundColor: 'transparent',
        flexDirection: 'row',
        alignItems: 'center',
        // justifyContent: 'space-between'
    },
    head: {
        width: 60,
        height: 60,
        borderRadius: 10,
        marginLeft: 20
    },
    headText: {
        fontWeight: 'bold',
        color: '#fff',
        fontSize: ScreenUtils.setFont(24),
        marginLeft: 15
    },
    addView: {
        width: 30,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.3)',
        borderRadius: 15
        // marginRight: 20
    },
    addIcon: {
        width: 15,
        height: 15,
    },
    cardView: {
        marginHorizontal: 12,
        height: 350,
        width: ScreenUtils.screenWidth - 20,
        position: 'absolute',
        top: 140,
    },
    cardItem: {
        flexDirection: 'row',
        padding: 0,
        margin: 10,
        alignItems: 'center',
        justifyContent: 'center',
        width: ScreenUtils.screenWidth * 0.95,
        height: ScreenUtils.screenHeight / 12,
    },
    itemLeft: {
        flex: 2,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 20
    },
    itemRight: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
        paddingHorizontal: 20
    },
    titleStyle: {
      fontWeight: 'bold',
      fontSize: ScreenUtils.setFont(14),
      marginBottom: 5
    },
    compile: {
        padding: 10,
        width: ScreenUtils.screenWidth,
        flexDirection: 'row',
        justifyContent: 'flex-end'
    },
    compileText: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        paddingRight: 15,
    },
    cTextStyle: {
        color: '#666666',
        fontWeight: 'bold',
        fontSize: 14,
        marginRight: 5
    },
    stepRightStyle: {
        position: 'absolute',
        top: 20,
        right: 20
    }
})
